<!-- 感谢网友Clementine提供本组件 -->
<template>
	<view v-if="showPrivacy" class="privacy">
		<view class="content">
			<view class="title">隐私保护指引</view>
			<view class="des">
				感谢选择我们的小程序，我们非常重视您的个人信息安全和隐私保护。根据最新法律要求，使用我们的产品前，请仔细阅读“<text class="link"
					@tap="openPrivacyContract">{{privacyContractName}}
				</text>”，以便我们向您提供更优质的服务！<br />我们将尽全力保护您的个人信息及合法权益，感谢您的信任！

				<br />
			</view>
			<view class="btns">
				<button class="item reject" @tap="exitMiniProgram">拒绝</button>
				<button id="agree-btn " class="item agree ui-BG-Main" open-type="agreePrivacyAuthorization"
					@agreeprivacyauthorization="handleAgreePrivacyAuthorization">同意并继续</button>
			</view>
			<view style="width: 100%;height: 48rpx;"></view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"public-privacy-popup",
		data() {
			return {
				privacyContractName: '',
				showPrivacy: false,
				isRead: false,
				resolvePrivacyAuthorization: null,
			};
		},
		mounted() {
			if (wx.onNeedPrivacyAuthorization) {
				wx.onNeedPrivacyAuthorization((resolve) => {
					this.resolvePrivacyAuthorization = resolve;
				});
			}

			if (wx.getPrivacySetting) {
				wx.getPrivacySetting({
					success: (res) => {
						if (res.needAuthorization) {
							this.privacyContractName = res.privacyContractName;
							this.showPrivacy = true;
						}
					},
				});
			}
		},
		methods: {
			openPrivacyContract() {
				wx.openPrivacyContract({
					success: () => {
						this.isRead = true;
					},
					fail: () => {
						uni.showToast({
							title: '遇到错误',
							icon: 'error',
						});
					},
				});
			},
			exitMiniProgram() {

				wx.exitMiniProgram();

			},
			handleAgreePrivacyAuthorization() {
				if (this.isRead) {
					this.showPrivacy = false;
					if (typeof this.resolvePrivacyAuthorization === 'function') {
						this.resolvePrivacyAuthorization({
							buttonId: 'agree-btn',
							event: 'agree',
						});
					}
				} else {
					uni.showToast({
						title: '请先阅读隐私授权协议',
						icon: 'error',
					});
				}
			},
		},
	}
</script>

<style scoped>
.privacy {
	position: fixed;
	right: 0;
	bottom: 0;
	height: 100vh;
	left: 0;
	background: rgba(0, 0, 0, .8);
	z-index: 9999999;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.content {
	width: 90%;
	padding: 48rpx;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	box-sizing: border-box;
	background: #fff;
	border-radius: 16rpx;
}

.content .title {
	text-align: left;
	color: #333;
	font-weight: bold;
	font-size: 32rpx;
}

.content .des {
	font-size: 26rpx;
	color: #666;
	margin-top: 40rpx;
	text-align: justify;
	line-height: 1.6;
}

.content .des .link {
	color: #07c160;
	text-decoration: underline;
}

.btns {
	margin-top: 48rpx;
	display: flex;
}

.btns .item {
	width: 200rpx;
	height: 72rpx;
	overflow: visible;
	display: flex;
	align-items: center;
	 
	justify-content: center;
	/* border-radius: 16rpx; */
	box-sizing: border-box;
	border: none !important;
}

.btns .reject {
	background: #f4f4f5;
	color: #666;
	font-size: 14px;
	font-weight: 300;
	margin-right: 16rpx;
}

.btns .agree {
	width: 600rpx;
	background: #07c160;
	color: #fff;
	font-size: 16px;
	 
}
</style>